<template >
  <view class="shopcart">
    <!-- 适配状态栏 -->
    <view class="head flex-btw">
      <!-- #ifdef APP-PLUS -->
      <view class="status_bar"></view>
      <!-- #endif -->

      <view class="nodat">
        <my-shoping title="购物车" @plusdle="plusdle"></my-shoping>

        <view class="shoppingcar" v-if="goodlist.length">
          <view
            class="shopindex"
            v-for="(item, index) in goodlist"
            :key="index"
          >
            <view class="shopimg">
              <!-- <radio v-model="isChecked" value="1" @tap="radioChange" /> -->
              <!-- <radio
                :value="isChecked"
                :checked="isChecked"
                @click="radioChange"
                class="radio"
              ></radio> -->
              <u-checkbox-group @change="checkboxGroupChange">
                <!-- <u-checkbox
                  @change="checkboxChange" -->
                <u-checkbox
                  v-model="item.checked"
                  size="36rpx"
                  active-color="#40AE36"
                  shape="circle"
                  :name="item.name"
                />
              </u-checkbox-group>
              <!-- <view>
                <view class="checkbox" @click="radioChange">
                  <uni-icons
                    :name="isChecked ? 'uni-icons-check' : ''"
                    size="32"
                  ></uni-icons>
                </view>
              </view> -->

              <image
                :src="item.img"
                style="width: 160rpx; height: 160rpx"
              ></image>
            </view>
            <view class="flex">
              <span class="span1">{{ item.goods_name_order }}</span>
              <view>
                <!-- <u-tag text="标签" type="error"></u-tag> -->
                <!--<u-tag text="24H发货" type="success"></u-tag> -->
              </view>
              <span class="span2">￥{{ item.purchase_price }}</span>
              <view class="step">
                <div>
                  <span>￥</span>
                  <span class="span3">{{ item.market_price }}</span>
                </div>
                <my-steppers
                  v-if="item"
                  class="stepper_btn"
                  :num="item.num"
                  :goods_id="item.goods_id"
                  :spu_id="item.spu_id"
                  :sign="string"
                  @plus="addAction(item, index, $event)"
                  @minus="subAction"
                  @showKey="showKey"
                >
                </my-steppers>
              </view>
            </view>
          </view>

          <view></view>
        </view>

        <view class="aspect" v-else>
          <view class="old_aspet">
            <div class="old1">购物车空空如也</div>
            <div class="old2">赶紧慰劳一下自己吧</div>
            <u-button plain shape="circle" class="old3" @click="gertinfo"
              >去逛逛</u-button
            >
          </view>
        </view>
      </view>
    </view>
    <view class="suggest">
      <image
        src="/static/images/tit-icon-l.png"
        style="width: 40rpx; height: 22rpx"
      ></image>
      <span>为你推荐</span>
      <image
        src="/static/images/tit-icon-r.png"
        style="width: 37rpx; height: 22rpx"
      ></image>
    </view>
    <div class="shopBox" :style="shopLists">
      <div
        class="shopBox-item"
        v-for="(item, index) in shopList"
        :key="index"
        @click="deleteInfo(item)"
      >
        <div class="shopBox-item-img">
          <image :src="item.img || '../../static/image/logo.jpg'"></image>
        </div>
        <span class="shopBox-item-title">{{ item.name }}</span>
        <div class="shopBox-item-num row_between">
          <div class="shopBox-item-num-price">
            ￥<span class="num">{{ item.spu[0].market_price | zeros }}</span
            ><span class="spu">/{{ item.spu[0].spu_name }}</span>
          </div>
          <div class="icons" @click.stop="addShop(index)"></div>
        </div>
      </div>
      <view class="shopbottom"></view>
    </div>
    <view class="selectall">
      <view class="quanx">
        <u-checkbox-group>
          <u-checkbox
            @change="checkedAll"
            v-model="list.checked"
            size="36rpx"
            active-color="#40AE36"
            shape="circle"
            :name="list.name"
          />
        </u-checkbox-group>
        <span>全选</span>
      </view>
      <view class="heji">
        <span>合计：</span>
        <span class="heji1">￥</span>
        <span class="heji2">{{ amountto }}</span>
        <u-button shape="circle" class="old4" @click="getrsettlement"
          >去结算</u-button
        >
      </view>
    </view>

    <my-addcart
      ref="minicart"
      @tabBarTag="changeTabBarTag"
      :canshowprice="canshowprice"
    ></my-addcart>
    <my-tabar :types="2" ref="tabar" current="2"></my-tabar>
  </view>
</template>

<script>
import { $https } from "@/static/js/request.js";
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState(["companyInfo"]),
    shopLists() {
      return {
        "--length": this.shopList.length,
      };
    },
  },
  data() {
    return {
      canshowprice: false,
      checkboxValue1: [],
      shopList: [],
      page: 1, // 当前页数
      count: 0, // 当前公司总数
      goodlist: [], //购物车列表
      // 基本案列数据
      list: {
        checked: false,
        disabled: false,
        name: "dfa",
      },
      val: 0,
      string: "string",
      timeStamp: "",
      // numn: 1,
      amountto: 0, //总价格
      checkedList: [], //已经选择的id
      tag: 1, //改变底部导航栏购物车tag
    };
  },
  filters: {
    // timeFilter: function (value) {
    //   if (!value) return "暂无";
    //   return value.slice(0, 5);
    // },
    zeros(num) {
      return +num.toString().replace(/(\.[0-9]*[1-9])0+$/, "$1");
    },
  },

  onShow() {
    this.getShopInfo();
    this.getCard();
    // console.log("333", this.companyInfo);
  },

  methods: {
    deleteInfo(info) {
      uni.navigateTo({
        url: `/pages/index/shopdetail?id=${info.goods_id}&company_id=${this.companyInfo.supplier_id}`,
      });
    },
    // 跳转到主页
    gertinfo() {
      uni.switchTab({
        url: `/pages/shop/index`,
      });
      console.log("111");
    },

    // 选中某个复选框时，由checkbox时触发
    checkboxChange(e) {
      console.log("|", e);
    },
    // 选中任一checkbox时，由checkbox-group触发
    checkboxGroupChange(e) {
      this.toamount();

      // 全选功能
      const sule = this.goodlist.every((item) => {
        return item.checked == true;
      });
      this.list.checked = sule;
    },
    // 全选
    checkedAll(e) {
      // console.log("checkedAll", e.value);
      if (e.value) {
        this.goodlist = this.goodlist.map((val) => {
          val.checked = true;
          return val;
        });
      } else {
        this.goodlist = this.goodlist.map((val) => {
          val.checked = false;
          return val;
        });
      }
      this.toamount();
    },
    // 合计
    toamount() {
      // 获取勾选的总价格
      this.amountto = this.goodlist.reduce((p, c) => {
        let rest = 0;
        if (c.checked) {
          rest = parseFloat(c.market_price) * Number(c.num);
        }
        p = p + rest;
        return p;
      }, 0);
      // console.log("this.amountto", this.amountto);

      //  获取勾选的id
      this.checkedList = [];
      this.goodlist.map((item) => {
        if (item.checked) {
          // return this.checkedList.push(item.goods_id);
          return this.checkedList.push(item.id);
        }
      });
    },

    // 点击加号
    addAction(item, index, $event) {
      // console.log("addAction", item, index, $event);
      this.goodlist.forEach((item) => {
        if (item.goods_id == $event.goods_id) {
          item.num = $event.num;
        }
      });
      this.postchangeCart($event);
      this.toamount();
      this.tag++;
      this.$refs.tabar.changetag(this.tag);
    },
    // 点击减号
    subAction(data) {
      // console.log("subAction", data);
      this.goodlist.forEach((item) => {
        if (item.goods_id == data.goods_id) {
          item.num = data.num;
        }
      });
      this.postchangeCart(data);
      this.toamount();
      this.tag--;
      this.$refs.tabar.changetag(this.tag);
    },
    // 点击数字
    showKey(data) {
      console.log("showKey", data);
    },
    addShop(index) {
      var data = this.shopList[index];
      this.$refs.minicart.open(data);
    },

    changeTabBarTag(num) {
      //改变底部导航栏购物车tag
      // console.log("num", num);
      this.$refs.tabar.changetag(num);
      this.getShopInfo();
      this.getCard();
    },

    //  为你推荐
    getShopInfo(page = 1) {
      let data = {
        page: page,
        size: 15,
        company_id: this.companyInfo.supplier_id,
      };
      $https("GET", "getGoodsSelect", data, (res) => {
        if (res.data.errcode == 0) {
          // 获取一级分类(最多只展示10个分类,多余的自动删除)
          // let list = res.data.data.first_list
          // this.classifiList = []
          if (page == 1) this.shopList = [];

          // list.forEach((item, index) => {
          //   if (index <= 9) {
          //     this.classifiList.push(item)
          //   }
          // })
          res.data.data.list.forEach((item) => {
            this.shopList.push(item);
          });
          this.count = res.data.data.count;
        } else {
          uni.showToast({
            icon: "none",
            title: res.data.errmsg,
          });
        }
      });
    },
    // 获取购物车列表
    getCard() {
      $https(
        "GETN",
        `getCart?company_id=${this.companyInfo.supplier_id}`,
        {},
        (res) => {
          console.log("res", res);
          if (res.statusCode == 200) {
            this.goodlist = res.data.data.listdata;
            this.tag = res.data.data.all_cart_num;
            this.$refs.tabar.changetag(this.tag);
            this.goodlist = this.goodlist.map((item) => {
              const sulet = {
                checked: false,
                disabled: false,
              };
              item = { ...sulet, ...item };
              return item;
            });
            console.log("this.goodlist", this.goodlist);
            // this.num = this.goodlist.num;
          } else {
            uni.showToast({
              icon: "none",
              title: res.data.errmsg,
            });
          }
        }
      );
    },
    // 清空购物车
    plusdle() {
      this.goodlist = [];
      this.getCard();
    },

    // 去结算
    getrsettlement() {
      console.log("去结算");
      //  if (this.checkedList.length > 0 && this.allPrice > 0) {
      if (this.amountto) {
        var params = JSON.stringify(this.checkedList);
        console.log("params", params);
        uni.navigateTo({
          url: `/pages/shopcart/submitorder?ids=${params}`,
          // url: `/pages/shopcart/submitorder`,
        });
      } else {
        uni.showToast({
          title: "下单金额必须大于0！",
          icon: "none",
        });
      }
    },
    //  加减购物车数据
    postchangeCart(data) {
      $https(
        "POST",
        `changeCart?company_id=${this.companyInfo.supplier_id}`,
        data,
        (res) => {
          console.log("res", res);
          if (res.statusCode == 200) {
            // this.getCard();
          } else {
            uni.showToast({
              icon: "none",
              title: res.data.errmsg,
            });
          }
        }
      );
    },
  },
};
</script>

<style lang="scss">
$length: var(--length) / 2;
.shopcart {
  width: 750rpx;
  background: #f8f9fa;
}

.shoppingcar {
  margin: 20rpx 30rpx 20rpx 30rpx;
  width: 690rpx;
  background: #ffffff;
  border-radius: 20px;

  .shopindex {
    width: 690rpx;
    height: 240rpx;
    display: flex;

    .shopimg {
      width: 270rpx;
      height: 240rpx;
      display: flex;
      align-items: center;

      image {
      }
      .u-checkbox {
        margin-left: 20rpx;
      }
    }
    .flex {
      flex: 1;
      padding: 15rpx 20rpx 15rpx 0;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      .span1 {
        margin-top: 20rpx;
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #333333;
        // line-height: 36rpx;
        height: 80rpx;
      }
      .span2 {
        font-size: 22rpx;
        font-family: PingFang SC;
        font-weight: 400;
        text-decoration: line-through;
        color: #cccccc;
      }

      .step {
        display: flex;
        justify-content: space-between;
        align-items: center;

        span {
          font-size: 22rpx;
          color: #f55726;
        }
        .span3 {
          font-size: 27rpx;
        }
      }
    }
  }
}

.aspect {
  margin: 20rpx 30rpx 20rpx 30rpx;
  width: 690rpx;
  height: 304rpx;
  background: #ffffff;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;

  .old_aspet {
    height: 224rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    // width: 150rpx;
    justify-content: space-around;
    position: absolute;
    .old1 {
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: 500;
    }
    .old2 {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #999999;
    }
    .old3 {
      background: #ffffff;
      color: #40ae36;
    }
  }
}
.suggest {
  padding: 30rpx 0;
  width: 100%;
  display: flex;
  justify-content: center;
  span {
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    margin: 0 23rpx;
  }
  image {
    margin-top: 16rpx;
  }
}

.shopBox {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat($length, 300rpx);
  gap: 20rpx;
  padding: 0 30rpx;

  &-item {
    width: 334rpx;
    height: 360rpx;
    border-radius: 20rpx;
    background-color: #fff;

    &-img {
      width: 200rpx;
      height: 200rpx;
      margin: 20rpx auto 0;
      border-radius: 20rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    &-title {
      padding: 0 30rpx;
      font-size: 26rpx;
      font-weight: bold;
      color: #333333;
      display: inline-block;
      width: calc(100% - 40rpx);
      white-space: pre-wrap;
      margin: 30rpx auto 0;
      font-family: PingFang SC;
    }

    &-num {
      align-items: center;
      padding: 0 20rpx 20rpx;
      margin: 20rpx auto 0;

      &-price {
        font-size: 22rpx;
        color: #f55726;
        font-family: PingFang SC;
        font-weight: bold;
        .num {
          font-size: 32rpx;
        }
        .spu {
          font-size: 22rpx;
          color: #999999;
          font-weight: bold;
        }
      }

      .icons {
        width: 44rpx;
        height: 44rpx;
        background-color: #40ae36;
        text-align: center;
        line-height: 44rpx;
        border-radius: 50%;
        background-image: url("../../static/images/gouwuche2.png");
        background-size: 100% 100%;
      }
    }
  }

  .shopbottom {
    margin: 40rpx 0;
  }
}

.selectall {
  position: fixed;
  bottom: 98rpx;
  width: 750rpx;
  height: 100rpx;
  background: #ffffff;
  border-radius: 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .quanx {
    width: 300rpx;
    margin-left: 20rpx;
    span {
      margin-left: 20rpx;
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #333333;
    }
  }

  .heji {
    display: flex;
    align-items: center;
    width: 400rpx;
    .heji1 {
      font-size: 20rpx;
      margin-top: 10rpx;
    }
    .heji2 {
      font-size: 27rpx;
    }

    .old4 {
      background: #40ae36;
      color: #eeee;
    }
  }
}
</style>

